<template>
  <div>
    <!-- <h1 class="animate__animated animate__wobble animate__delay-2s">111111</h1> -->
    <img src="../assets/imgs/marketing/introduce_pic_9.png" data-src="img-1.jpg" />
    <img src="../assets/imgs/marketing/introduce_pic_9.png" data-src="img-2.jpg" />
    <img src="../assets/imgs/marketing/introduce_pic_9.png" data-src="img-3.jpg" />

  </div>
</template>
<script>
function query(selector) {
  return Array.from(document.querySelectorAll(selector));
}

var observer = new IntersectionObserver(
  function(entries) {
    entries.forEach(function(entry) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    });
  }
);

query('.lazy-loaded').forEach(function (item) {
  observer.observe(item);
});
</script>

<style scoped>
</style>